<!DOCTYPE html>
<html lang="en">

<head>
  <title>手机品牌管理</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0px;
    }

    .header_con {
      height: 60px;
      background-color: #101010;
      overflow: hidden;
    }

    .header {
      width: 960px;
      margin: 0px auto;
      overflow: hidden;
    }

    .header h1 {
      margin: 0px;
      padding: 0px;
      font-size: 22px;
      line-height: 60px;
      font-weight: normal;
      color: #f1f1f1;
      letter-spacing:1px;
      float: left;
    }

    .header input {
      float: right;
      width: 240px;
      height: 30px;
      text-indent: 10px;
      border-radius: 4px;
      margin-top: 15px;
      border: 0px;
      outline: none;
    }
    .tb_title{
      width:960px;
      height:40px;
      margin:20px auto 0;
      background-color: #3366cc;
      overflow: hidden;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
    }
    .tb_title h3{
      margin:0px;
      padding:0px;
      line-height:40px;
      font-size:16px;
      font-weight:normal;
      text-indent:15px;
      float: left;
      color:#fff;
    }
    .tb_title a{     
      float: right;
      text-decoration:none;
      background-color: #f3cd57;
      color:#2c2203;
      padding:5px 10px;
      font-size:12px;
      border-radius:4px;
      margin:7px 15px 0 0;
    }
    .tb_title a:hover{
      border:1px solid rgba(255,255,255,0.6);
      background-color:transparent;
      color:#fff;
    }

    .tb {
      border-collapse: collapse;
      width: 960px;
      margin: 0 auto;
    }

    .tb th {
      background-color: #f1f1f1;
      color: #333;
      font-size:14px;
    }

    .tb td,
    .tb th {
      padding:10px 0;
      border: 1px solid #999;
      text-align: center;
    }
    .tb td{
      color:#666;
      font-size:14px;
    }
    .del{
      text-decoration:none;
      color:#f90
    }

    .add {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -100px;
      width: 400px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #999;
      border-radius:4px;
      z-index:100;
    }

    .add h3{
      padding:0px;
      margin:0px;
      background-color: #3366cc;
      color:#fff;
      font-size:16px;
      font-weight:normal;
      line-height:40px;
      text-indent:15px;
    }

    .add_form{
      margin:30px 0 0 50px;
    }

    .add_form label{
      font-size:14px;
      padding-right:10px;
    }
    .add_form input{
     width:200px;
     height:24px;
     border:1px solid #ccc;
     outline:none;
     text-indent:10px;
     border-radius:4px;
    }
    .btns{
      border-top:1px solid #ccc;
      margin-top:50px;
      padding-right:10px;
    }
    .btns input{
      width:62px;
      height:30px;
      border:1px solid #dadce0;
      border-radius:4px;
      background-color: #fff;
      float:right;
      margin:10px 10px 0 0;
      outline:none;
      cursor: pointer;;
    }
    .btns input:last-child{
      background-color: #669df6;
      color:#fff;
      border-color:#5793f6;
    }

    .mask{
      position: fixed;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.3);
      z-index:99;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- 这里是顶部显示的内容 -->
    <div class="header_con">
      <div class="header">
        <h1>手机品牌管理</h1>
        <input type="text"  placeholder="请输入搜索条件">
      </div>
    </div>

    <!-- 显示内容的标题部分 -->
    <div class="tb_title">
       <h3>品牌列表</h3>
       <a href="javascript:;" >新增品牌</a>
    </div>

    <!-- 显示手机列表信息 -->
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <tr >
        <td>1</td>
        <td>小米</td>
        <td>2019-07-01 09:21:02 am</td>
        <td>
          <a href="#"  class="del">删除</a>
        </td>
      </tr>
      <tr >
        <td colspan="4">没有品牌数据</td>
      </tr>
    </table>

    <!-- 新增品牌弹框 -->
    <div class="add_con" >
      <div class="add">
        <h3>新增品牌</h3>
        <div class="add_form">
          <label>品牌名称:</label>
          <input type="text" >          
        </div>
        <div class="btns">
            <input type="button" value="取消" >
            <input type="button"  value="添加">            
        </div>      
      </div>
      <div class="mask"></div>
    </div>

  </div>
</body>